<template>
  <view>
    <view class="top">
      <view style="display: flex;flex-direction: column">
        <view style="display: flex;align-items: center">
          <u-avatar shape="square" size="70" :src="topicInfo.url"></u-avatar>
          <view
              style="padding-left: 20px;color: #000000;display: flex;flex-direction: column;justify-content: flex-start">
            <text>{{ topicInfo.name }}</text>
            <text style="font-size: 14px;color: #9a9a9a">99999&nbsp;{{ topicInfo.nickname }}</text>
          </view>
        </view>
        <text class="u-line-1" style="color: #9a9a9a;padding: 20px 0;">{{ topicInfo.description }}</text>
      </view>

    </view>
    <u-gap height="3"></u-gap>
    <view class="content">
      <text style="font-size: 20px;font-weight: bold">话题规则</text>
      <view style="display: flex;flex-direction: column;justify-content: flex-start;padding: 30rpx 0">
        <view style="display: flex;align-items: center">
          <view style="display: flex;align-items: center;
          justify-content: center;background-color: #e54d61;color: white;border-radius: 50%;padding: 5px;font-size: 14px;
    height: 15px;
    width: 15px;">x</view>
          <text style="color:#E54D61FF;padding: 15rpx 0">&nbsp;不可以</text>
        </view>
        <text>{{topicInfo.inactive}}</text>
      </view>
      <view style="display: flex;flex-direction: column;justify-content: flex-start;padding: 30rpx 0">
        <view style="display: flex;align-items: center">
          <view style="display: flex;align-items: center;justify-content: center;background-color: #4ea4f9;color: white;border-radius: 50%;padding: 5px;font-size: 14px;
    height: 15px;
    width: 15px;">√</view>
          <text style="color:#4ea4f9;padding: 15rpx 0">&nbsp;提倡</text>
        </view>
        <text>{{topicInfo.active}}</text>
      </view>
    </view>
  </view>
</template>

<script>
import {getChannelById} from "@/api/channel";

export default {
  data() {
    return {
      topicInfo: {}
    };
  },onLoad(options) {
    this.getTopicInfo(options.id)
    this.$nextTick(() => {
      this.loading = false
    })
    uni.setNavigationBarTitle({
      title: this.topicInfo.name
    })
  },methods: {

    async getTopicInfo(id) {
      const res = await  getChannelById(id)
      this.topicInfo = res.data
    }
  }
}
</script>

<style lang="scss">
.top {
  overflow: hidden;
  display: flex;
  align-items: center;
  width: 100%;
  height: 7rem;
  padding:  30rpx;
  z-index: 1;
  background-color: rgba(255, 255, 255, 0.1);
}
.content{
  padding: 30rpx;
}
</style>
